<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <style>
        .fontfamliy_t1 {
            font-family: Georgia, serif;
            font-size: 20px;
        }

        .fontfamliy_t2 {
            font-family: "Comic Sans MS", cursive, sans-serif;
            font-size: 20px;
        }

        .fontfamliy_t3 {
            font-family: "Lucida Console", Monaco, monospace;
            font-size: 20px;
        }

        .fontstyle_normal {
            font-style: normal;
            font-size: 20px;
        }

        .fontstyle_italic {
            font-style: italic;
            font-size: 20px;
        }

        .fontstyle_oblique {
            font-style: oblique;
            font-size: 20px;
        }
        .fontsize_px{
            font-size: 30px;
        }
        .fontsize_point{
            font-size: 20%;
        }
        .fontsize_em{
            font-size: 2em;
        }
    </style>
</head>
<div>
    <ul>
        <li>css字型:font-family css有两种字型①通用字形（例如Serif和Monospace）②特定字型（Times和Courier）<br>
            <ol>
                <li> Serif在文字上有装饰</li>
                <li> Sans-serif 文字上无装饰</li>
                <li> Monospace 所有等宽字体有相同的宽度</li>
            </ol>
        </li>
        <li>字体样式：font-style ①normal正常②italic 斜体③oblique斜体2 </li>
        <li>字体大小：①绝对大小②相对大小</li>
        <li></li>
    </ul>
    <div class="dv_show" style="width:800px;height:150px;">
        <h3>字型</h3>
        <span class="fontfamliy_t1">serif字体:  font-family:  Georgia, serif;</span><br>
        <span class="fontfamliy_t2">sans - serif字体:   font-family:  "Comic Sans MS", cursive, sans-serif;</span><br>
        <span class="fontfamliy_t3">Monospace 字体:  font-family: "Lucida Console", Monaco, monospace;</span><br>

    </div>
    <div>
        <h3>字体样式</h3>
        <p class="fontstyle_normal">normal正常</p>
        <p class="fontstyle_italic">italicl斜体</p>
        <p class="fontstyle_oblique">oblique斜体2</p>
    </div>
    <div>
        <h3>字体大小</h3>
        <p class="fontsize_px">px设置</p>
        <p class="fontsize_point">%设置</p>
        <p class="fontsize_em">em设置</p>
    </div>

</html>